<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="ptb20 plr30">
				<view class="box">
					<view class="inp_item flex-box">
						<view class="left">姓名</view>
						<input type="text" placeholder="请输入" v-model="formData.username" class="flex-grow-1 inp"
							placeholder-class="colb" />
					</view>
					<view class="inp_item flex-box">
						<view class="left flex-grow-1">性别</view>
						<view class="switch ml40" :class="item.id==formData.gender?'ac':''"
							@click="bindGenderChange(item.id)" v-for="(item,index) in genders">{{item.name}}</view>
					</view>
					<view class="inp_item flex-box">
						<view class="left">手机号</view>
						<input type="number" maxlength="11" placeholder="请输入" v-model="formData.mobile"
							class="flex-grow-1 inp" placeholder-class="colb" />
					</view>
					<view class="inp_item flex-box">
						<view class="left">身份证号</view>
						<input type="idcard" maxlength="18" placeholder="请输入" v-model="formData.idcard"
							class="flex-grow-1 inp" placeholder-class="colb" />
					</view>
					<view class="inp_item"><multi-select class="inp_item" :items="areas"
							@change="bindDistrictsChange" id_key="id" name_key="name" max_level="3"
							:value="formData.district_id">
							<view class="inp_item flex-box">
								<view class="left">所在区/县</view>
								<view class="fs30 flex-grow-1 tr pl30 m-ellipsis"
									:class="[!areaName?'colb':'col3']">
									{{areaName ? areaName : '请选择'}}
								</view>
							</view>
						</multi-select>
					</view>

					<view class="inp_item flex-box">
						<view class="left">详细地址</view>
						<input type="text" placeholder="请输入" v-model="formData.address" class="flex-grow-1 inp"
							placeholder-class="colb" />
					</view>
				</view>
				<view class="box mt20">
					<view class="inp_item">
						<multi-select class="inp_item" :items="categories"
							@change="bindCategoryChange" id_key="id" name_key="name" :value="formData.category_id">
							<view class="inp_item flex-box">
								<view class="left">培训类型</view>
								<view class="fs30 flex-grow-1 tr pl30 m-ellipsis"
									:class="[!getListItemById(categories,formData.category_id)?'colb':'col3']">
									{{getListItemAttrById(categories,formData.category_id,'name','请选择')}}
								</view>
							</view>
						</multi-select>
					</view>

					<view class="inp_item"><multi-select class="inp_item" :items="majors" @change="bindMajorChange"
							id_key="id" name_key="name" :value="formData.major_id">
							<view class="inp_item flex-box">
								<view class="left">培训专业</view>
								<view class="fs30 flex-grow-1 tr pl30 m-ellipsis" :class="[!getListItemById(majors,formData.major_id)?'colb':'col3']">
									{{getListItemAttrById(majors,formData.major_id,'name','请选择')}}
								</view>
							</view>
						</multi-select>
					</view>

					<view class="inp_item flex-box">
						<view class="left">培训地点</view>
						<input type="text" placeholder="请输入" v-model="formData.place" class="flex-grow-1 inp"
							placeholder-class="colb" />
					</view>

				</view>
				<view class="btn" @click="bindSubmit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import multiSelect from '@/components/multi-select/multi-select.vue';
	var validate = require("../../xilu/validate.js");
	export default {
		components: {
			multiSelect
		},
		data() {
			return {
				
				genders: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				areas: [],
				areaName: '',
				categories: [],
				majors: [],
				formData: {
					username: '',
					gender: 0,
					mobile: '',
					idcard: '',
					province_id: 0,
					city_id:  0,
					district_id: 0,
					address: '',
					category_id: 0,
					major_id: 0,
					place: ''
				},
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			
			this.$util.getAreasTree(false).then(areas => {
				this.areas = areas;
			});
			this.$util.getTrainCategory(false).then(items => {
				this.categories = items;
			});
			this.$util.getTrainMajor(false).then(items => {
				this.majors = items;
			});
		},
		methods: {
			bindGenderChange(id) {
				this.formData.gender = id;
			},
			bindDistrictsChange(event) {
				this.areaName = event.items.map(item => item.name).join(',');
				this.formData.province_id = event.items[0].id;
				this.formData.city_id = event.items[1].id;
				this.formData.district_id = event.items[2].id;
				this.$forceUpdate()
			},
			bindCategoryChange(event) {
				this.formData.category_id = event.items[0].id;
			},
			bindMajorChange(event) {
				this.formData.major_id = event.items[0].id;
			},
			bindSubmit(event) {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				let data = this.formData;
				var rule = [{
						name: 'username',
						rules: ['require'],
						errorMsg: {
							require: '请填写姓名'
						}
					},
					{
						name: 'gender',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择性别',
							gt: '请选择性别'
						}
					},
					{
						name: 'mobile',
						rules: ['require', 'mobile'],
						errorMsg: {
							require: '请填写手机号',
							mobile: '请填写正确的手机号'
						}
					},
					{
						name: 'idcard',
						rules: ['require'],
						errorMsg: {
							require: '请填写身份证号'
						}
					},
					{
						name: 'district_id',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择区县',
							gt: '请选择区县'
						}
					},
					{
						name: 'address',
						rules: ['require'],
						errorMsg: {
							require: '请填写详细地址'
						}
					},
					{
						name: 'category_id',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择培训类别',
							gt: '请选择培训类别'
						}
					},
					{
						name: 'major_id',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择培训专业',
							gt: '请选择培训专业'
						}
					},
					{
						name: 'place',
						rules: ['require', ],
						errorMsg: {
							require: '请填写培训地点'
						}
					},
				];
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				this.$core.post({
					url: 'xilujob.train/add_intention',
					data: data,
					success: ret => {
						uni.showModal({
							title: '提示',
							content: ret.msg,
							showCancel: false,
							success() {
								uni.navigateBack();
							}
						})

					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 690rpx;
		padding: 10rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;

		.inp_item+.inp_item {
			border-top: 1px solid #E7E7E7;
		}

		.inp_item {
			height: 110rpx;
		}

		.left {
			font-size: 30rpx;
			color: #333333;
		}

		.inp {
			text-align: right;
			padding-left: 30rpx;
			color: #333;
			font-size: 30rpx;
		}

		.switch {
			width: 122rpx;
			height: 53rpx;
			line-height: 53rpx;
			text-align: center;
			font-size: 30rpx;
			color: #666666;
			background: #EFF0F2;
			border-radius: 27rpx;

			&.ac {
				background: var(--primary);
				color: #FFFFFF;
			}
		}
	}

	.btn {
		margin-top: 70rpx;
		width: 580rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		background: var(--primary);
		border-radius: 8rpx;
		margin-left: auto;
		margin-right: auto;
	}
</style>